<template>
  <div class="app-container" :loading="submitLoading">
    <div class="filter-container">
      <div style="align-items: center; display: flex">
        <div>
          <el-input
            v-model="listQuery.keyword"
            placeholder="搜索关键字"
            clearable
          ></el-input>
        </div>
        <div class="time_select">
          <el-date-picker
            prefix-icon="none"
            v-model="listQuery.searchTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </div>
         <el-select @change='change' v-model="type_select" placeholder="请选择" style="width:150px">
          <el-option
            v-for="item in select"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="searchList()">
          搜索
        </el-button>
        <el-button type="primary" @click="Refresh()"> 刷新 </el-button>
        <el-button type="primary" @click="batch_settlement()">
          批量结算
        </el-button>
      </div>
    </div>
    <!-- 列表-->
    <el-table
      :data="list"
      v-loading="listLoading"
      border
      style="width: 100%"
      @selection-change="changeFun"
    >
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column label="id" prop="id" align="center" width="60">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" align="center">
        <template slot-scope="scope">
          <span class="link-type" @click="edit(scope.row)">{{
            scope.row.item_name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="委托单位" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.entrust_unit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="建设位置" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.build_position }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工程名称" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.archives_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业务类型" align="center">
        <template slot-scope="{ row }">
          <div v-for="item in row.bus" :key="item.id">
            {{ item.bus_name }}：{{ item.source_load }}
            {{ "(" + item.unit + ")" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="市场负责人" align="center" width="110">
        <template slot-scope="{ row }">
          <span>{{ row.market_person_uid_str }}</span>
        </template>
      </el-table-column>
      <el-table-column label="配合市场人" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.market_person_b_uid_str }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="80">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="结算" placement="top">
            <el-button
              size="mini"
              type="primary"
              @click="tiao_zhuan(scope.row.id)"
            >
            结算
              <!-- 修改 -->
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog title="详情" :visible.sync="popup_edit_show" width="50%" center>
      <div>
        <div class="main">
          <div class="flex">
            <el-form
              :model="xiang_qing"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="日期:">
                <div>{{ xiang_qing.add_time_str }}</div>
              </el-form-item>
              <el-form-item label="业务类型">
                <!-- <span>{{ row.bus[0].bus_name}}</span> -->
                <div v-for="item in xiang_qing.bus" :key="item.id">
                  {{ item.bus_name }}：{{ item.source_load }}
                  {{ "(" + item.unit + ")" }}
                </div>
              </el-form-item>
              <el-form-item label="市场负责人:">
                <span class="type_span">{{
                  xiang_qing.market_person_uid_str
                }}</span>
              </el-form-item>

              <el-form-item label="所属合同:">
                <div>{{ xiang_qing.archives_name }}</div>
              </el-form-item>
              <el-form-item label="委托单位:">
                <div>{{ xiang_qing.entrust_unit }}</div>
              </el-form-item>
              <el-form-item label="配合市场人:">
                <div>{{ xiang_qing.market_person_b_uid_str }}</div>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-form
              :model="xiang_qing"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="备注:">
                <div>{{ xiang_qing.remark }}</div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 分页-->
    <div class="fenye">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page_count"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  item_list,
  notice_del,
  notice_add,
  notice_detail,
  notice_edit,
} from "@/api/jiesuan/item/nojiesuan";
// import Sortable from 'sortablejs'
export default {
  // comments:{
  //   Sortable
  // },
  name: "item_peihe",
  data() {
    return {
      type_select:'未结算项目',
      type_num:0,
       select: [
        {
          value: -1,
          label: "全部项目",
        },
        {
          value: 0,
          label: "未结算项目",
        },
        {
          value: 1,
          label: "已结算项目",
        },
      ],
      // 详情信息
      xiang_qing: "",
      // 选择框选择后的id
      select_all: "",
      list_elections: [],
      ruleForm: {
        title: "",
        content: "",
        sort: 0,
        is_top: false,
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
        ],
      },
      listLoading: 0,
      submitLoading: false,
      popup_edit_show: false,
      popup_add_show: false,
      diary_details: {},
      dialogVisible: false,
      // jia_content: "",
      // jia_title: "",
      list: null,
      listQuery: {
        is_jiesuan: "0",
        page: 1,
        limit: 10,
        keyword: "",
        searchTime: [],
      },
      // tableKey: 1,
      // currentPage: 1,
      page_count: 0,
      // page_limit: 10,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    // 获取列表数据
    getList(page, limit, listQuery) {
      
      page = page || this.listQuery.page;
      limit = limit || this.listQuery.limit;
      //定义listquery，为了下方可以使用key_word.....
      listQuery = listQuery || this.listQuery;
      let keyWord = listQuery.keyword || "";

      let searchTime =
        listQuery.searchTime && listQuery.searchTime.length > 0
          ? listQuery.searchTime[0] + "," + listQuery.searchTime[1]
          : "";
      this.listQuery.is_jiesuan = this.type_num
      this.listLoading = true;
      this.listQuery.search_time = searchTime
      item_list(this.listQuery).then((res) => {
        this.list = res.data;
        this.page_count = res.count;
        this.listLoading = false;
      });
    },
    //搜索事件
    searchList() {
      this.getList(1, this.listQuery.limit, this.listQuery);
    },
    //每页几条数据
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList(1, val, this.listQuery);
    },
    //跳转到
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList(val, this.listQuery.limit, this.listQuery);
    },
    //新增数据提交
    submit_add() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          notice_add(
            this.ruleForm.title,
            this.ruleForm.content,
            this.ruleForm.is_top,
            this.ruleForm.sort
          )
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.getList(
                  this.listQuery.page,
                  this.listQuery.limit,
                  this.listQuery
                );
                this.popup_add_show = false;
                this.submitLoading = false;
                this.ruleForm.title = "";
                this.ruleForm.content = "";
                this.ruleForm.sort = 0;
                this.ruleForm.is_top = false;
              }
            })
            .catch(() => {
              this.submitLoading = false;
            });
        } else {
         
          return false;
        }
      });
    },
    list_del(val) {
      let that = this;
      notice_del(val.row.id).then((res) => {
        if (res.code == 200) {
          this.getList(
            this.listQuery.page,
            this.listQuery.limit,
            this.listQuery
          );
        }
      });
    },
    list_detail(val) {
      let that = this;
      notice_detail(val.row.id).then((res) => {
        if (res.code == 200) {
          that.dialogVisible = true;
          that.diary_details = res.data;
        }
      });
    },
    add(val) {
      this.ruleForm.is_top = false;
      this.popup_add_show = true;
    },
    edit(val) {
      this.xiang_qing = val;
      this.ruleForm.is_top = val.is_top ? true : false;
      this.popup_edit_show = true;
    },
    submit_edit() {
      let that = this;
      this.$refs.diary_details.validate((valid) => {
        if (valid) {
        
          that.diary_details.is_top = that.diary_details.is_top ? 1 : 0;
          that.submitLoading = true;
          notice_edit(
            that.diary_details.id,
            that.ruleForm.is_top,
            that.diary_details.title,
            that.diary_details.content,
            that.diary_details.sort
          ).then((res) => {
            if (res.code == 200) {
              that.popup_edit_show = false;
              that.submitLoading = false;
              that.getList(
                this.listQuery.page,
                this.listQuery.limit,
                this.listQuery
              );
            }
          });
        } else {
        
        }
      });
    },
    //复选框状态改变
    changeFun(val) {
      this.select_all = val
        .map((item) => {
          return item.id;
        })
        .join(",");
    },
    batch_settlement() {
      let that = this;
      if (!this.select_all) {
        this.$message({
          message: "请勾选您要结算的项目",
          type: "warning",
        });
        return;
      } else {
        // that.popup_edit_show=true
        that.$router.push({
          path: "hook",
          query: {
            id: that.select_all,
          },
        });
      }
    },
    // 单个跳转
    tiao_zhuan(id) {
      this.$router.push({
        path: "hook",
        query: {
          id,
        },
      });
    },
    change(e){
      this.listQuery.page = 1
      this.type_num = e
      this.getList()
    },
    Refresh() {
      this.listLoading = true;
      this.listQuery.keyword = "";
      this.listQuery.searchTime = "";
      this.listQuery.limit = 10;
      this.listQuery.page = 1;
      item_list(this.listQuery).then((res) => {
       
        if (res.code == 200) {
          this.currentPage = 1;
          this.page_limit = 10;
          this.list = res.data;
          this.listLoading = false;
          this.page_count = res.count;
        }
      });
    },
  },
};
</script>
<style type="text/css" scoped="scoped">
.button_wight {
  width: 60%;
  height: 60px;
}
.button {
  text-align: center;
}
.desc {
  display: flex;
}
.flex {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.main {
  padding: 20px;
}

.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}

.fenye {
  padding: 20px 0px;
}

.el-range-editor.el-input__inner {
  width: 230px !important;
  padding: 3px 3px !important;
}
.type_span {
  margin-right: 5px;
}
</style>
